<template>
  <div class="shopcart" @click.stop="toggleShopcartList">
    <div class="content-left">
      <div class="logo-wrapper">
        <div :class="['logo', {'highlight': totalCount > 0}]">
          <span class="icon icon-shopping_cart"></span>
        </div>
        <div class="num" v-show="totalCount">{{totalCount}}</div>
      </div>

      <div :class="['price', 'border-right', {'highlight': totalPrice > 0}]">￥{{totalPrice}}</div>

      <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
    </div>
    
    <div class="content-right">
      <div :class="['pay',payClass]" @click.stop="payFor">
        {{payDesc}}
      </div>
    </div>

    <transition-group 
      name="drop"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
      :css="false"
      tag="div"
    >
      <div
        class="ball"
        v-for="(ball, index) in balls" 
        :key="index"
        v-show="ball.show"
      >
        <div class="inner" ref="inner" v-show="ball.show"></div>
      </div>
    </transition-group>
    <transition name="fold">
      <div class="shopcart-list" v-show="showShopcartList">
        <div class="list-header">
          <h1 class="title">购物车</h1>
          <span class="empty" @click="clearShopcart">清空</span>
        </div>
        <scroll 
          class="list-content"
          ref="listContent"
          :listen-scroll="listenScroll"
          :probe-type="probeType"
          :data="selectFoods"
        >
          <ul>
            <li class="food border-bottom" v-for="(food, index) in selectFoods" :key="index">
              <span class="name">{{food.name}}</span>
              <div class="price">
                <span>￥{{food.price * food.count}}</span>
              </div>
              <div class="cartcontrol-wrapper">
                <cartcontrol :food="food"></cartcontrol>
              </div>
            </li>
          </ul>
        </scroll>
      </div>
    </transition>
    
    <transition name="down">
      <div class="shopcart-mask" v-show="showShopcartList"></div>
    </transition>
  </div>
</template>

<script>
import Cartcontrol from '@/components/cartcontrol/cartcontrol'
import Scroll from '@/base/scroll/scroll'

import Velocity from 'velocity-animate'

export default {
  name: 'Shopcart',
  props: {
    selectFoods: {
      type: Array,
      default() {
        return []
      }
    },
    deliveryPrice: {
      type: Number,
      default: 0
    },
    minPrice: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      balls: [
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        }
      ],
      dropBalls: [],
      fold: false, // 购物车列表折叠
      listenScroll: true,
      probeType: 3
    }
  },
  computed: {
    totalPrice() {
      let total = 0
      this.selectFoods.forEach(food => {
        total += food.price * food.count
      })
      return total
    },
    totalCount() {
      let count = 0
      this.selectFoods.forEach(food => {
        count += food.count
      })
      return count
    },
    payDesc() {
      if(!this.totalPrice) {
        return `另需配送费￥${this.minPrice}`
      } else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice
        return `还差￥${diff}元起送`
      } else {
        return "去结算"
      }
    },
    payClass() {
      if(this.totalPrice< this.minPrice) {
        return 'not-enough'
      }else {
        return 'enough'
      }
    },
    showShopcartList() {
      if(!this.totalCount) { // 购物车为空
        this.changeFold()
        return false
      }
      let show = !this.fold
      return show
    }
  },
  methods: {
    changeFold() {
      this.fold = true
    },
    drop(el) {
      for(let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if(!ball.show) {
          ball.show = true
          ball.el = el
          
          this.dropBalls.push(ball)
          return
        }
      }
    
    },
    handleBeforeEnter: function(el) {
      let count = this.balls.length
      while (count --) {
        let ball = this.balls[count]
        if(ball.show) {
          let rect = ball.el.getBoundingClientRect()
          let x = rect.left - 32
          let y = -(window.innerHeight - rect.top - 32)

          Velocity.hook(el, "translateY", `${y}px`)
          Velocity.hook(this.$refs.inner[count], "translateX", `${x}px`)

        }
      }
    },
    handleEnter: function(el, done) {
      let inner = el.getElementsByClassName("inner")[0]
      Velocity(el, 'stop')
      Velocity(inner, 'stop')
      Velocity(el,
        { 
          translateY: 0,
        },
        { 
          duration: 800,
          complete: done,
          easing: [.37,-.17,.8,.62]
        }
      )
     
      Velocity(inner,
        {
          translateX: 0,
        }, {
          duration: 800,
          complete: done,
          easing: "linear"
        }
      )
    },
    handleAfterEnter: function(el) {
      let ball = this.dropBalls.shift()
      if(ball) {
        ball.show = false
        el.style.display = ""
      }
    },
    toggleShopcartList() {
      if(!this.totalCount) return

      this.fold = !this.fold
      this.$nextTick(() => {
        this.$refs.listContent.refresh()
      })
    },
    clearShopcart() {
      this.selectFoods.forEach(food => {
        food.count = 0
      })
    },
    payFor() {
      if(this.minPrice > this.totalPrice)return
      window.alert(`支付${this.totalPrice}元`)
    }
  },
  components: {
    Cartcontrol,
    Scroll
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/stylus/mixin.styl'
  .shopcart
    display flex
    background #141d27
    color rgba(255,255,255,.4)
    .content-left
      flex 1
      font-size 0
      .logo-wrapper
        display inline-block
        position relative
        top -10px
        margin 0 12px
        padding 6px
        width 56px
        height 56px
        box-sizing border-box
        background #141d27
        border-radius 50%
        vertical-align top
        .logo
          width 100%
          height 100%
          border-radius 50%
          background #2b343c
          text-align center
          &.highlight
            background rgb(0,160,220)
            .icon
              color #ffffff
          .icon
            line-height 44px
            color #80858a
            font-size 24px
        .num
          position absolute
          top 0
          right 0
          width 24px
          height 16px
          border-radius 16px
          line-height 16px
          text-align center
          font-size 9px
          font-weight 700
          color #ffffff
          background rgb(240,20,20)
          box-shadow 0 4px 8px 0 rgba(0,0,0,.4)
      .price
        display inline-block
        margin 12px
        padding-right 12px
        box-sizing border-box
        border-color(rgba(255,255,255,.1))
        vertical-align top
        font-size 16px
        font-weight 700
        line-height 24px
        &.highlight
          color #ffffff
      .desc
        display inline-block
        vertical-align top        
        margin 12px 0 0 12px
        line-height 24px
        font-size 10px
    .content-right
      flex 0 0 105px
      width 105px
      .pay
        height 48px
        line-height 48px
        text-align center
        font-size 12px
        font-weight 700
        background #2b333b
        &.not-enough
          background #2b333b
        &.enough
          background #00b43c
          color #ffffff
    .ball
      position fixed
      left 32px
      bottom 22px
      z-index 999
      transform translate3d(0,-200px,0)
      .inner
        width 16px
        height 16px
        border-radius 50%
        background rgb(0,160,220)
        transform translate3d(200px,0,0)
    .shopcart-list
      position absolute
      left 0
      top 0
      width 100%
      transform translate3d(0, -100%, 0)
      z-index -1
      &.fold-enter-active
      &.fold-leave-active
        transition transform .5s
      &.fold-enter
      &.fold-leave-to
        transform translate3d(0,0,0)
      .list-header
        height 40px
        padding 0 18px
        line-height 40px
        background #f3f5f7
        border-bottom 1px solid rgba(7,17,27,.1)
        .title
          float left
          font-size 14px
          color rgb(7,17,27)
        .empty
          float right
          font-size 12px
          color rgb(0,160,220)
      .list-content
        overflow hidden
        padding 0 18px
        max-height 217px
        background #ffffff
        .food
          position relative
          padding 12px 0
          box-sizing border-box
          border-color(rgba(7,17,27,.1))
          &:last-child
            border-none()
          .name
            line-height 24px
            font-size 14px
            color rgb(7,17,27)
          .price
            position absolute
            right 90px
            bottom 12px
            line-height 24px
            color rgb(240,20,20)
            font-weight 700
          .cartcontrol-wrapper
            position absolute 
            bottom 6px
            right 0
    .shopcart-mask
      overflow hidden
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background rgba(7,17,27,.7)
      transform translate3d(0, 0, 0)
      backdrop-filter blur(10px)
      filter blur(5px)
      z-index -99
      &.down-enter-active
      &.down-leave-active
        transition transform .6s
      &.down-enter
      &.down-leave-to
        transform translate3d(0,-100%,0)
        background rgba(7,17,27,0)
</style>
